<template>
  <!-- 搜索按钮区域 -->
  <div class="search-btn">
    <!-- 搜索框 -->
    <el-input style="width: 500px; margin-right: 10px" size="large" placeholder="请输入内容">
      <template #prefix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
    </el-input>
    <el-button size="large" type="primary" @click="search">搜索</el-button>
    <el-button size="large" type="warning" @click="reset">重置</el-button>
    <el-button size="large" type="primary" @click="advanceSearch">高级搜索</el-button>
  </div>

  <FileTable :tableData="tableData"></FileTable>

  <!-- 分页器 -->
  <div class="pagination-block">
    <el-pagination :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="tableDataNum" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" v-model:current-page="currentPage4" v-model:page-size="pageSize4" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import FileTable from './components/FileTable.vue'
import { getFilesByPath } from '@/api/data/phenotype.js'

// 表格数据
const tableData = ref([])
// 表格数据总数（用于分页器）
const tableDataNum = ref(0)
const currentPath = ref('/')
const loadTableData = () => {
  let params = {
    filePath: currentPath.value,
    pageNo: 1,
    pageSize: 10
  }
  getFilesByPath(params).then(res => {
    tableData.value = res.records
    tableDataNum.value = res.total
  })
}

onMounted(() => {
  loadTableData()
  console.log("tableData", tableData)
})
</script>

<style lang="scss" scoped>
.search-btn {
  margin-bottom: 20px;
}

.pagination-block {
  margin: 10px;
}
</style>